<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JSX插值表达式</title>
	</head>
	<body>
		<div id="app"></div>
		
		<script src="./js/react17.development.js"></script>
		<script src="./js/react-dom17.development.js"></script>
		<script src="./js/babel.min.js"></script>
		<script type="text/babel">
			class ClsHome extends React.Component {
				
				constructor() {
					super()
					this.state = {
						name: "大牧",
						age: 22
					}
				}
				
				render() {
					return <div>
						<h2>状态数据管理</h2>
						<p>姓名: { this.state.name }</p>
						<p>年龄: { this.state.age }</p>
						<button onClick={() => this.changeName() }>修改姓名</button>
						<button onClick={this.changeAge.bind(this)}>修改年龄</button>
					</div>
				}
				
				changeAge() {
					// // 修改数据
					// this.state.age = 18
					// console.log(this.state, "修改后的数据")
					// // 刷新页面
					// this.setState({})
					
					// 修改数据并刷新页面
					this.setState({
						age: 18
					})
				}
				
				changeName() {
					this.setState({
						name: "DAMU"
					})
				}
				
			}
			
			ReactDOM.render(<ClsHome></ClsHome>, document.querySelector("#app"))
		</script>
	</body>
</html>